import React, {useState} from 'react';
import {View, Text, Alert, Modal, TextInput, StyleSheet} from 'react-native';
export default function ModalSearch(props) {
  const {isShow, changeIsShow} = props;
  //   const [showModal, setShowModal] = useState(true);
  const [searchValue, setSearchValue] = useState('');
  const changeSearchValue = value => {
    setSearchValue(value);
    // console.log(value);
  };

  return (
    <View style={styles.centeredView}>
      <Modal
        style={styles.modalView}
        visible={isShow}
        transparent={true}
        animationType="slide"
        onRequestClose={() => {
          //   Alert.alert('隐藏', '隐藏modal');
          changeIsShow(!isShow);
        }}>
        <Text style={{height: 40, borderColor: 'gray', borderWidth: 1}}>
          搜索产品：
        </Text>
        <TextInput
          onChangeText={changeSearchValue}
          value={searchValue}
          placeholder="输入产品名字"></TextInput>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 22,
  },
  modalView: {
    backgroundColor: 'red',
    margin: 20,
    // backgroundColor: 'white',
    borderRadius: 20,
    padding: 35,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
});
